<template>
  <div>
    <h1>美食各地分类</h1>
    <div class="App">
      <Item v-for="data in eat" :key="data.id" v-bind="data">
        <template v-slot:default="{ list }">
          <ul>
            <li v-for="item in list" :key="item">{{ item }}</li>
          </ul>
        </template>
      </Item>
    </div>

    <h1>游戏分类</h1>
    <div class="App">
      <Item v-for="data in play" :key="data.id" v-bind="data">
        <template #default="{ list }">
          <ol>
            <li v-for="item in list" :key="item">{{ item }}</li>
          </ol>
        </template>
      </Item>
    </div>
  </div>
</template>

<script>
  import Item from "./components/Item.vue";
  export default {
    name: "App",
    components: {
      Item,
    },
    data() {
      return {
        eat: [
          { id: "001", type: "北京", list: ["卤煮", "豆汁"] },
          { id: "002", type: "上海", list: ["红烧肉", "小笼包"] },
          { id: "003", type: "武汉", list: ["热干面", "巴子"] },
        ],
        play: [
          { id: "001", type: "30", list: ["红警", "泡泡堂", "cs1.4"] },
          { id: "002", type: "20", list: ["LoL", "DNF", "CF"] },
          { id: "003", type: "10", list: ["奥特曼大战孙悟空", "消消乐"] },
        ],
      };
    },
  };
</script>

<style scoped>
  .App {
    display: flex;
    justify-content: space-around;
  }
</style>
